<template>
	<div>
		<template v-if="url">
			<div style="display: flex;  flex-wrap: wrap;">
				<template>
					<i class="el-icon-circle-close" @click="delimg()"></i>
						<div class="picA" v-if="url">
							<img class="img" :src="getimg + url">
						</div>
				</template>
			</div>
					
				</template>
			<el-upload  ref="upload" v-if="!url" :action="upfile_url"  :on-success="upimg_back_fun" :headers="upfile_head"
				 :limit="1" multiple :show-file-list="false" name="img" list-type="picture-card" class="imgs">
					<i class="el-icon-plus"></i>
				</el-upload>
	</div>
</template>

<script>
	export default {
		props:{
			url:'',
			index:'',
		},
		data(){
			return{
				drawer:false,
				urls:'',
				upfile_head: {
					token: localStorage.getItem('token')
				},
				getimg:this.$get_img,
				upfile_url:this.$get_img+"cms/common/uploads_image"
			}
		},
		mounted() {
			
		},
		methods:{
			delimg(){
				this.$emit("delImg",this.index)
			},
			back(){
				this.drawer=false
			},
			send_father(e){
				let data={
					index:this.index,
					data:e
				}
				this.drawer=false
				this.$emit("get_data",data)
			},
			upimg_back_fun(e){
				let data={
					index:this.index,
					url:e.data.url,

				}
				this.$refs.upload.clearFiles(); //上传成功之后清除历史记录
				this.$emit("get_url",data)
			}
		}
	}
</script>

<style>
	.form{
		width: 400px;
	}
	.select{
		width: 100%;
	}
	
	.picA {
		width: 148px;
		height: 148px;
		background-color: #FBFDFF;
		border: 1px dashed #C0CCDA;
		border-radius: 6px;
		box-sizing: border-box;
		vertical-align: top;
		text-align: center;
		margin: 6px;
	}
	
	.img {
		width: 144px;
		height: 144px;
		border: 1px solid #BFBFBF;
		border-radius: 3px;
	}
	
	.banner{
		width: 1000px;
	}
	
	.banner_img{
		display: flex;
		flex-wrap: wrap;
	}
	.sku_input{
		width: 150px;
	}
	.sku_data{
		display: flex;
		flex-wrap: wrap;
		padding: 10px;
		width: 1000rpx;
	}
	.quill-editor{
		width: 1000px;
		height: 250px;
	}
	.sub{
		margin-top: 100px;
	}
</style>
